<!-- 书架组件 -->
<template>
  <div class="store-shelf">
    <shelf-title :title="$t('shelf.title')"></shelf-title>
    <scroll
      class="store-shelf-scroll-wrapper"
      :top="0"
      :bottom="scrollBottom"
      @onScroll="onScroll"
      ref="scroll"
    >
      <shelf-search @onCancel="onCancel"></shelf-search>
      <shelf-list :data="shelfList"></shelf-list>
    </scroll>
    <shelf-footer></shelf-footer>
  </div>
</template>

<script>
import ShelfTitle from '../../components/shelf/ShelfTitle'
import ShelfSearch from '../../components/shelf/ShelfSearch'
import ShelfList from '../../components/shelf/ShelfList'
import ShelfFooter from '../../components/shelf/ShelfFooter'
import { storeShelfMixin } from '../../utils/mixin'
import Scroll from '../../components/common/Scroll'

export default {
  mixins: [storeShelfMixin],
  components: {
    Scroll,
    ShelfTitle,
    ShelfSearch,
    ShelfList,
    ShelfFooter
  },
  watch: {
    isEditMode(isEditMode) {
      this.scrollBottom = isEditMode ? 48 : 0
      // 等界面响应完成之后再刷新滚动界面
      this.$nextTick(() => {
        this.$refs.scroll.refresh()
      })
    }
  },
  data() {
    return {
      scrollBottom: 0
    }
  },
  methods: {
    onScroll(offsetY) {
      this.setOffsetY(offsetY)
    },
    onCancel() {
      this.$refs.scroll.scrollTo(0, 0)
    }
    // // 获取书架书籍列表 放入mixin
    // getShelfList() {
    //   //从localStorage中获取书架书籍数据
    //   let shelfList = getBookShelf()
    //   if (!shelfList) {
    //     // 从接口获取列表数据
    //     shelf().then(response => {
    //       // console.log(response)
    //       if (response.status === 200 && response.data && response.data.bookList) {
    //         shelfList = appendAddToShelf(response.data.bookList)
    //         saveBookShelf(shelfList)
    //         this.setShelfList(shelfList)
    //       }
    //     })
    //   } else {
    //     // 更新vuex 中的书架列表
    //     this.setShelfList(shelfList)
    //   }
    // }
  },
  mounted() {
    // 从vuex中获取书籍
    this.getShelfList()
    this.setShelfCategory([])
    this.setCurrentType(1)
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global";

.store-shelf {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: white;
  .store-shelf-scroll-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
  }
}
</style>
